﻿@{
    Layout = "~/Areas/User/Views/Shared/_Layout.cshtml";
}

@section Title{
    首页-美妆商城
}

@*@section Logo{
    <ul class="shopping_grid">
        <a href="#"><li><span class="m_1">购&nbsp;物&nbsp;车</span>&nbsp;&nbsp;(0) &nbsp;<img src="~/Content/User/images/bag.png" alt="" /></li></a>
        <a class="userlogin" href="/User/Account/login"><li>登&nbsp;录</li></a>
        <a class="userregister" href="/User/Account/Register"><li>注&nbsp;册</li></a>
    </ul>
    <div class="clearfix"> </div>
}*@

@section slider{
    <div class="slider">
        <div class="callbacks_container">
            <ul class="rslides" id="slider">
                <li>
                    <img src="~/Content/User/images/banner1.jpg" class="img-responsive" alt="" />
                    <div class="banner_desc">
                        <h1>We Provide Worlds top fashion for less fashionpress.</h1>
                        <h2>FashionPress the name of the of hi class fashion Web FreePsd.</h2>
                    </div>
                </li>
                <li>
                    <img src="~/Content/User/images/banner2.jpg" class="img-responsive" alt="" />
                    <div class="banner_desc">
                        <h1>Duis autem vel eum iriure dolor in hendrerit.</h1>
                        <h2>Claritas est etiam processus dynamicus, qui sequitur .</h2>
                    </div>
                </li>
                <li>
                    <img src="~/Content/User/images/banner3.jpg" class="img-responsive" alt="" />
                    <div class="banner_desc">
                        <h1>Ut wisi enim ad minim veniam, quis nostrud.</h1>
                        <h2>Mirum est notare quam littera gothica, quam nunc putamus.</h2>
                    </div>
                </li>
            </ul>
        </div>
    </div>
}

<div class="col-md-3 sidebar_box">
    <div class="sidebar">
        <div class="menu_box">
            <h3 class="menu_head">商品列表</h3>
            <ul class="menu">
                <li class="item1">
                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />推荐品牌</a>
                    <ul class="cute">
                        <li class="subitem1"><a href="">欧 莱 雅 </a></li>
                        <li class="subitem2"><a href="#">雅诗兰黛 </a></li>
                        <li class="subitem3"><a href="#">兰   蔻 </a></li>
                        <li class="subitem4"><a href="#">韩   束</a></li>
                        <li class="subitem5"><a href="#">倩   碧</a></li>
                        <li class="subitem6"><a href="#">雅   顿</a></li>
                        <li class="subitem7"><a href="#">佰 草 集</a></li>
                        <li class="subitem8"><a href="#">菲诗小铺</a></li>
                    </ul>
                </li>
                <li class="item2">
                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />面部护理</a>
                    <ul class="cute">
                        <li class="subitem1"><a href="/ProductDetail/XieZhuang?typeId=1&type=面部护理">洁   面</a></li>
                        <li class="subitem2"><a href="/ProductDetail/XieZhuang?typeId=9&type=面部护理">卸   妆</a></li>
                        <li class="subitem3"><a href="/ProductDetail/XieZhuang?typeId=3&type=面部护理">爽 肤 水</a></li>
                        <li class="subitem4"><a href="/ProductDetail/XieZhuang?typeId=6&type=面部护理">乳液面霜</a></li>
                        <li class="subitem5"><a href="/ProductDetail/XieZhuang?typeId=4&type=面部护理">精   华</a></li>
                        <li class="subitem6"><a href="/ProductDetail/XieZhuang?typeId=11&type=面部护理">眼   霜</a></li>
                        <li class="subitem7"><a href="/ProductDetail/XieZhuang?typeId=8&type=面部护理">防   晒</a></li>
                        <li class="subitem8"><a href="/ProductDetail/XieZhuang?typeId=2&type=面部护理">面   膜</a></li>
                    </ul>
                </li>
                <li class="item3">
                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />香氛彩妆</a>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">BB   霜</a></li>
                        <li class="subitem2"><a href="#">女士香水</a></li>
                        <li class="subitem3"><a href="#">底   妆</a></li>
                        <li class="subitem4"><a href="#">睫 毛 膏</a></li>
                        <li class="subitem5"><a href="#">眼   线</a></li>
                        <li class="subitem6"><a href="#">眼   影</a></li>
                        <li class="subitem7"><a href="#">唇   彩</a></li>
                        <li class="subitem8"><a href="#">腮   红</a></li>
                        <li class="subitem9"><a href="#">美   甲</a></li>
                    </ul>
                </li>
                <li class="item4">
                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />洗发护发</a>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">洗   发 </a></li>
                        <li class="subitem2"><a href="#">护   发 </a></li>
                        <li class="subitem3"><a href="#">染   发</a></li>
                        <li class="subitem4"><a href="#">假   发</a></li>
                        <li class="subitem5"><a href="#">造   型</a></li>
                        <li class="subitem6"><a href="#">美发工具</a></li>
                    </ul>
                </li>
                <li class="item5">
                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />身体护理</a>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">沐   浴</a></li>
                        <li class="subitem2"><a href="#">润   肤 </a></li>
                        <li class="subitem3"><a href="#">精   油 </a></li>
                        <li class="subitem4"><a href="#">颈   部</a></li>
                        <li class="subitem5"><a href="#">手   足</a></li>
                        <li class="subitem6"><a href="#">纤体塑形</a></li>
                        <li class="subitem7"><a href="#">美   胸</a></li>
                    </ul>
                </li>
                <li class="item6">
                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />口腔护理</a>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">牙   膏/牙   粉 </a></li>
                        <li class="subitem2"><a href="#">牙   刷/牙   线 </a></li>
                        <li class="subitem3"><a href="#">漱 口 水 </a></li>
                    </ul>
                </li>
                <li class="item7">
                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />精品男士</a>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">洁   面 </a></li>
                        <li class="subitem2"><a href="#">爽 肤 水 </a></li>
                        <li class="subitem3"><a href="#">男   香 </a></li>
                        <li class="subitem4"><a href="#">乳   液</a></li>
                        <li class="subitem5"><a href="#">面   霜</a></li>
                        <li class="subitem6"><a href="#">精   华</a></li>
                        <li class="subitem7"><a href="#">剃   须</a></li>
                    </ul>
                </li>
                <li class="item8">
                    <a href="#"><img class="arrow-img" src="~/Content/User/images/f_menu.png" alt="" />奢品美妆</a>
                    <ul class="cute">
                        <li class="subitem1"><a href="#">雅诗兰黛 </a></li>
                        <li class="subitem2"><a href="#">迪   奥</a></li>
                        <li class="subitem3"><a href="#">海蓝之谜 </a></li>
                        <li class="subitem4"><a href="#">希 思 黎</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            $(function () {
                var menu_ul = $('.menu > li > ul'),
                       menu_a = $('.menu > li > a');
                menu_ul.hide();
                menu_a.click(function (e) {
                    e.preventDefault();
                    if (!$(this).hasClass('active')) {
                        menu_a.removeClass('active');
                        menu_ul.filter(':visible').slideUp('normal');
                        $(this).addClass('active').next().stop(true, true).slideDown('normal');
                    } else {
                        $(this).removeClass('active');
                        $(this).next().stop(true, true).slideUp('normal');
                    }
                });

            });
        </script>
    </div>
</div>

<div class="col-md-9 content_right">
    <div class="top_grid1">
        @foreach (var item in @Model)
        {
            <div class="col-md-4 top_grid1-box1">
              
                    <div class="grid_1">
                        <a href="/User/Product/Single?id=@item.Id">
                            <div class="b-link-stroke b-animate-go  thickbox">
                                <img src=@item.pic class="img-responsive" alt="" />
                            </div>
                        </a>
                        <div class="grid_2">
                            <p>@item.PName</p>
                            <ul class="grid_2-bottom">
                                <li class="grid_2-left"><p>￥@item.Price</p></li>
                                <li class="grid_2-right">
                                    <img src=@item.pic style="display:none"/>
                                    <div class="btn btn-primary btn-normal btn-inline btnCart " id="@item.Id" target="_self" title="加入购物车">加入购物车</div>
                                </li>
                            </ul>
                            <div class="clearfix"> </div>
                        </div>
                    </div>
              
                  
</div>
        }
        <div class="clearfix"> </div>
    </div>

   

    <h4 class="head"><span class="m_2">新品</span> 上市</h4>
    <div class="top_grid2">
        <div class="col-md-4 top_grid1-box1">
            <a href="single.html">
                <div class="grid_1">
                    <div class="b-link-stroke b-animate-go  thickbox">
                        <img src="~/Content/User/images/p9.jpg" class="img-responsive" alt="" />
                    </div>
                    <div class="grid_2">
                        <p>There are many variations of passages</p>
                        <ul class="grid_2-bottom">
                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                            <div class="clearfix"> </div>
                        </ul>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-4 top_grid1-box1">
            <a href="single.html">
                <div class="grid_1">
                    <div class="b-link-stroke b-animate-go  thickbox">
                        <img src="~/Content/User/images/p10.jpg" class="img-responsive" alt="" />
                    </div>
                    <div class="grid_2">
                        <p>There are many variations of passages</p>
                        <ul class="grid_2-bottom">
                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                            <div class="clearfix"> </div>
                        </ul>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-4 top_grid1-box1">
            <a href="single.html">
                <div class="grid_1">
                    <div class="b-link-stroke b-animate-go  thickbox">
                        <img src="~/Content/User/images/p11.jpg" class="img-responsive" alt="" />
                    </div>
                    <div class="grid_2">
                        <p>There are many variations of passages</p>
                        <ul class="grid_2-bottom">
                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                            <div class="clearfix"> </div>
                        </ul>
                    </div>
                </div>
            </a>
        </div>
        <div class="clearfix"> </div>
    </div>
    <div class="top_grid2">
        <div class="col-md-4 top_grid1-box1">
            <a href="single.html">
                <div class="grid_1">
                    <div class="b-link-stroke b-animate-go  thickbox">
                        <img src="~/Content/User/images/p12.jpg" class="img-responsive" alt="" />
                    </div>
                    <div class="grid_2">
                        <p>There are many variations of passages</p>
                        <ul class="grid_2-bottom">
                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                            <div class="clearfix"> </div>
                        </ul>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-4 top_grid1-box1">
            <a href="single.html">
                <div class="grid_1">
                    <div class="b-link-stroke b-animate-go  thickbox">
                        <img src="~/Content/User/images/p13.jpg" class="img-responsive" alt="" />
                    </div>
                    <div class="grid_2">
                        <p>There are many variations of passages</p>
                        <ul class="grid_2-bottom">
                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                            <div class="clearfix"> </div>
                        </ul>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-md-4 top_grid1-box1">
            <a href="single.html">
                <div class="grid_1">
                    <div class="b-link-stroke b-animate-go  thickbox">
                        <img src="~/Content/User/images/p14.jpg" class="img-responsive" alt="" />
                    </div>
                    <div class="grid_2">
                        <p>There are many variations of passages</p>
                        <ul class="grid_2-bottom">
                            <li class="grid_2-left"><p>$99<small>.33</small></p></li>
                            <li class="grid_2-right"><div class="btn btn-primary btn-normal btn-inline " target="_self" title="Get It">Get It</div></li>
                            <div class="clearfix"> </div>
                        </ul>
                    </div>
                </div>
            </a>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>


@*<script src="~/Content/User/js/IsLogin.js"></script>*@





